/* magic/Mind Reader.css */

*:focus {outline: none;} /* prevents outline on clicked items */
* { /* reset */
	padding:0;
	margin:0;
	box-sizing:border-box;
}

body {
	background-color:#008;
	font-family:sans-serif;
	color:#00f;
}

#main {
	background-color:ivory;
	width:98vw;
	margin: 1vw auto;
	padding-bottom: 1vw;
	max-width:900px;
}
#head {
	padding-top: .5vw;
	display:flex;
	align-items: center;
	justify-content: space-around;
}
#head div img {
	width:80%;
	display:block;
	margin:0 auto;
}
#title {
	font-size: 30px;
}
#items {
	display:flex;
	align-items: flex-start;
	flex-wrap:wrap;
	justify-content: space-around;
}
.pic {
	width:25%; /* 3 columns */
}
#footer {
	margin:5px 0;
	font-size: 4vw;
	width: 100%;
	text-align:center;
}
#result,#no,#yes {
	display:none;
}
button {
	background: peru;
	color:ivory;
	padding:.5vw 3vw .5vw 4vw;
	font-size: 5vw;
	border-radius: 20%;
	cursor: pointer;
}
#prompt {
	margin-bottom: 5px;
}
#no {
	background: red;
}
#yes {
	background: green;
}
#no,#yes {
	margin: 20px;
}
@media screen and (orientation:landscape) {
	#head div img {
		width:60%;
	}
	.pic {
		width:15%; /* 6 columns */
	}
	#footer {
		font-size: 2vw;
	}
	button {
		font-size:2.5vw;
	}
}